<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <title>生态圈系统-门店管理</title>
  <link rel="icon" th:href="@{/images/favicon.ico}" th:mce_href="@{/images/favicon.ico}" type="image/x-icon">
  <link rel="shortcut icon" th:href="@{/images/favicon.ico}" th:mce_href="@{/images/favicon.ico}" type="image/x-icon">

  <!-- CSS  -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="plugins/bootstrap-4.0.0/css/bootstrap.min.css" th:href="@{/plugins/bootstrap-4.0.0/css/bootstrap.min.css}" type="text/css" rel="stylesheet"/>
  <link href="css/materialize.css" th:href="@{/css/materialize.css}" type="text/css" rel="stylesheet" media="screen,projection"/>
  <link href="plugins/perfect-scrollbar/perfect-scrollbar.css" th:href="@{/plugins/perfect-scrollbar/perfect-scrollbar.css}" type="text/css" rel="stylesheet" media="screen,projection"/>
  <link href="plugins/bootstrap-datepicker/css/bootstrap-datepicker.css" th:href="@{/plugins/bootstrap-datepicker/css/bootstrap-datepicker.css}" type="text/css" rel="stylesheet"/>
  <link href="plugins/bootstrap-sweetalert/sweetalert.css" th:href="@{/plugins/bootstrap-sweetalert/sweetalert.css}" type="text/css" rel="stylesheet"/>
  <link href="css/style.css" th:href="@{/css/style.css}" type="text/css" rel="stylesheet"/>
</head>
<body>
  <header>
    <nav class="" role="navigation" style="background-color: #f4f6f9;">
      <div class="nav-wrapper">
        <ul class="right hide-on-med-and-down">
          <!--
          <li><a class="blue-text waves-effect dropdown-trigger" href="#!" data-target="dropdown1" style="vertical-align: top;"><span th:if="${session.user!=null}" th:text="${session.user.username}">admin</span><i class="material-icons right">arrow_drop_down</i></a></li>
           -->
          <li><a class="grey-text waves-effect dropdown-trigger" href="#!" data-target="dropdown1" style="vertical-align: top;"><span sec:authentication="name">admin</span><i class="material-icons right">arrow_drop_down</i></a></li>
          <ul id="dropdown1" class="dropdown-content">
            <li><a href="#modal3" class="waves-effect grey-text modal-trigger">修改密码</a></li>
            <li><a th:href="@{/company/logout}" class="waves-effect grey-text">退出登录</a></li>
          </ul>
        </ul>

        <a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
      </div>
    </nav>
  </header>

  <div th:replace="common/aside_company :: aside"></div>

  <main class="" style="height: calc(100% - 48px); background-color: #f4f6f9;">
    <div class="row">
      <h6 style="margin: 0 0 0 15px;" id="page-title" active-menu="store-menu">门店管理</h6>
    </div>

    <div class="row white" style="margin: 0 15px; height: inherit;">

      <div class="col s12" style="height: inherit;"> <!-- Note that "m8 l9" was added -->
        <div class="">
          <form id="search">
            <div class="row" style="margin-bottom: 0;">
              <div class="input-field col s2">
                <input type="text" name="name" id="storeName" th:value="${search.name}">
                <label for="storeName">门店名称</label>
              </div>
              <div class="input-field col s1">
                <a th:href="'javascript:search();'" class="waves-effect waves-light btn-floating search-btn"><i class="material-icons right">search</i></a>
              </div>
              <div class="col s2">
                <div style="position: relative; height: 70px;">
                </div>
              </div>
              <div class="input-field col s1">
                <a class="waves-effect waves-light btn-floating btn-small blue right modal-trigger" href="#modal2"><i class="material-icons">add</i></a>
              </div>
            </div>
          </form>
        </div>

        <div style="padding-top: 0; height: inherit;">

          <div>
            <table class="responsive-table">
              <thead>
                <tr>
                  <th width="25%">名称</th>
                  <th width="25%">联系方式</th>
                  <th width="40%">地址</th>
                  <th width="10%">操作</th>
                </tr>
              </thead>
            </table>
          </div>

          <div id="table_body_div" style="height: calc(100% - 88px); position: relative;">
            <div>
	            <table class="highlight responsive-table">
	              <thead>
	                <tr>
	                  <th class="no-padding" width="25%"></th>
	                  <th class="no-padding" width="25%"></th>
	                  <th class="no-padding" width="40%"></th>
	                  <th class="no-padding" width="10%"></th>
	                </tr>
	              </thead>
	              <tbody>
	                <tr th:each="s : ${stores}">
	                  <td th:text="${s.name}" th:title="${s.name}">总店</td>
	                  <td th:text="${s.contactInfo}" th:title="${s.contactInfo}">联系电话</td>
	                  <td th:text="${s.address}" th:title="${s.address}">山东济南</td>
	                  <td class="no-padding">
	                    <a th:href="'javascript:openEditModal(\''+${s.id}+'\');'" title="111"><i class="material-icons">edit</i></a>
	                    <a th:href="'javascript:deleteSubmit(\''+${s.id}+'\');'"><i class="material-icons">delete</i></a>
	                  </td>
	                </tr>
	              </tbody>
	            </table>
            </div>
          </div>
          <ul class="pagination">
            <!-- <li class="disabled"><a href="#!"><i class="material-icons">chevron_left</i></a></li>
            <li class="active"><a href="#!">1</a></li>
            <li class="waves-effect"><a href="#!">2</a></li>
            <li class="waves-effect"><a href="#!">3</a></li>
            <li class="waves-effect"><a href="#!">4</a></li>
            <li class="waves-effect"><a href="#!">5</a></li>
            <li class="waves-effect"><a href="#!"><i class="material-icons">chevron_right</i></a></li> -->
          </ul>

        </div>

      </div>

  	</div>
  </main>

  <!-- <footer class="white page-footer teal">
    <div class="footer-copyright">
      <div class="black-text container">
      Made by <a class="brown-text text-lighten-3" href="http://materializecss.com">Materialize</a>
      </div>
    </div>
  </footer> -->

  <!-- Modal Structure -->

  <div id="modal1" class="modal modal-fixed-footer">
    <div class="modal-header">
      <h6>编辑门店</h6>
      <a class="btn-flat modal-close"><i class="material-icons">close</i></a>
    </div>
    <div class="modal-content" style="border: unset; border-radius: 0;">
      <div class="row" style="width: 100%;">
        <form class="col s12">
          <input name="id" type="hidden">
          <div class="row">
            <div class="col s12 input-field">
              <input type="text" name="name" id="name1" class="validate" required maxlength="20">
              <label for="name1"><font color="red">*</font>名称</label>
              <span class="helper-text" data-error="必填项" data-success="right"></span>
            </div>
          </div>
          <div class="row">
            <div class="col s12 input-field">
              <input type="tel" name="contactInfo" id="contactInfo1" class="validate" required maxlength="60">
              <label for="contactInfo1"><font color="red">*</font>联系方式</label>
              <span class="helper-text" data-error="必填项" data-success="right"></span>
            </div>
          </div>
          <div class="row">
            <div class="col s12 input-field">
              <input type="text" name="address" id="address1" class="validate" required maxlength="200">
              <label for="address1"><font color="red">*</font>地址</label>
              <span class="helper-text" data-error="必填项" data-success="right"></span>
            </div>
          </div>
          <input type="reset" style="display:none;" />
        </form>
      </div>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-close waves-effect waves-light btn-flat" style="margin-right: 10px;">取消</a>
      <button class="btn waves-effect waves-light light-blue darken-1" type="submit" name="action" style="margin-right: 10px;" th:onclick="editSubmit()">确认</button>
    </div>
  </div>

  <div id="modal2" class="modal modal-fixed-footer">
    <div class="modal-header">
      <h6>新增门店</h6>
      <a class="btn-flat modal-close"><i class="material-icons">close</i></a>
    </div>
    <div class="modal-content" style="border: unset; border-radius: 0;">
      <div class="row">
        <form class="col s12">
          <div class="row">
            <div class="col s12 input-field">
              <input type="text" name="name" id="name" class="validate" required maxlength="20">
              <label for="name"><font color="red">*</font>名称</label>
              <span class="helper-text" data-error="必填项" data-success="right"></span>
            </div>
          </div>
          <div class="row">
            <div class="col s12 input-field">
              <input type="tel" name="contactInfo" id="contactInfo" class="validate" required maxlength="60">
              <label for="contactInfo"><font color="red">*</font>联系方式</label>
              <span class="helper-text" data-error="必填项" data-success="right"></span>
            </div>
          </div>
          <div class="row">
            <div class="col s12 input-field">
              <input type="text" name="address" id="address" class="validate" required maxlength="200">
              <label for="address"><font color="red">*</font>地址</label>
              <span class="helper-text" data-error="必填项" data-success="right"></span>
            </div>
          </div>
          <!-- <div class="row">
            <div class="col s6 input-field">
              <select name="companyId">
                <option value="" disabled selected>请选择企业</option>
                <option th:each="c : ${companies}" th:value="${c.id}"  th:text="${c.name}">企业1</option>
                <!-- <option value="2">企业2</option>
                <option value="3">企业3</option> -->
              <!-- </select>
              <label><font color="red">*</font>企业</label>
              <span class="helper-text" data-error="wrong" data-success="right"></span>
            </div>
          </div> -->
          <input type="reset" style="display:none;" />
        </form>
      </div>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-close waves-effect waves-light btn-flat" style="margin-right: 10px;">取消</a>
      <button class="btn waves-effect waves-light light-blue darken-1" type="submit" name="action" style="margin-right: 10px;" th:onclick="addSubmit()">确认</button>
    </div>
  </div>

  <div th:replace="common/update_pwd :: #modal3"></div>

  <!--  Scripts-->
  <script src="js/jquery-3.3.1.min.js" th:src="@{/js/jquery-3.3.1.min.js}"></script>
  <script src="js/materialize.js" th:src="@{/js/materialize.js}"></script>
  <script src="plugins/perfect-scrollbar/perfect-scrollbar.min.js" th:src="@{/plugins/perfect-scrollbar/perfect-scrollbar.min.js}"></script>
  <script src="plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js" th:src="@{/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js}"></script>
  <script src="plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js" th:src="@{/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js}" charset="UTF-8"></script>
  <script src="plugins/bootstrap-sweetalert/sweetalert.min.js" th:src="@{/plugins/bootstrap-sweetalert/sweetalert.min.js}"></script>
  <script src="js/common.js" th:src="@{/js/common.js}"></script>
  <script src="js/jquery.page.js" th:src="@{/js/jquery.page.js}"></script>
  <script th:inline="javascript">
    $(".pagination").createPage({
      pageCount: [[${stores.totalPages}]],
      current: [[${stores.number}]] + 1,
      backFn:function(p){
        window.location.href = "stores?page=" + (p - 1) + "&" + formParamsSerialize($("#search").find('input, select'));
      }
    });

    function search() {
      console.log($("#search").serialize());
      window.location.href = "stores?" + formParamsSerialize($("#search").find('input, select'));
    }

    function addSubmit() {
      var input_elems = $('#modal2 .modal-content input, #modal2 .modal-content textarea');
      input_elems.each(function(){
        M.validate_field($(this));
      });
      var invalid_input_elems = $('#modal2 .modal-content input.invalid, #modal2 .modal-content textarea.invalid');
      if(invalid_input_elems.length > 0) {
        return false;
      }
      $.ajax({
        url: "/kangchenjunga/api/v1/companies/stores/",
        data: '{"name" : "' + $('#modal2 input[name="name"]').val()
            + '", "address" : "' + $('#modal2 input[name="address"]').val()
            + '", "contactInfo" : "' + $('#modal2 input[name="contactInfo"]').val()
            + '", "companyId" : "' + [[${#authentication.principal.companyId}]] + '"}',
        contentType: "application/json;charset=utf-8",
        type: "POST",
        headers: {
          Accept: "application/json"
        },
        success: function(data, textStatus) {
          console.log(data);
          swal({
            title: "",
            text: "保存成功!",
            icon: "success",
            timer: 2000,
          }).then(function(value) {
	          $("#modal2 input[type=reset]").trigger("click");
	          $('#modal2').modal('close');
            window.location.reload();
          });
        },
        error: function (data, textStatus, errorThrown) {
          //console.log(data);
          swal({
            title: "",
            text: "保存失败!",
            icon: "error",
            //timer: 2000,
          });
          M.updateTextFields();
        }
      });

    }

    function openEditModal(storeId) {
      $.ajax({
        url: "/kangchenjunga/api/v1/companies/stores/" + storeId,
        contentType: "application/json;charset=utf-8",
        type: "GET",
        headers: {
          Accept: "application/json"
        },
        success: function(data, textStatus) {
        	$("#modal1 input[type=reset]").trigger("click");
          $('#modal1 input[name="id"]').val(data.id);
          $('#modal1 input[name="name"]').val(data.name);
          $('#modal1 input[name="address"]').val(data.address);
          $('#modal1 input[name="contactInfo"]').val(data.contactInfo);
          M.updateTextFields();
          $('#modal1').modal('open');
        }
      });
    }

    function editSubmit() {
      var input_elems = $('#modal1 .modal-content input, #modal1 .modal-content textarea');
      input_elems.each(function(){
        M.validate_field($(this));
      });
      var invalid_input_elems = $('#modal1 .modal-content input.invalid, #modal1 .modal-content textarea.invalid');
      if(invalid_input_elems.length > 0) {
        return false;
      }
      $.ajax({
        url: "/kangchenjunga/api/v1/companies/stores/" + $('#modal1 input[name="id"]').val(),
        data: '{"name" : "' + $('#modal1 input[name="name"]').val()
		        + '", "address" : "' + $('#modal1 input[name="address"]').val()
		        + '", "contactInfo" : "' + $('#modal1 input[name="contactInfo"]').val()
		        + '", "companyId" : "' + [[${#authentication.principal.companyId}]]
            + '", "id" : ' + $('#modal1 input[name="id"]').val() + '}',
        contentType: "application/json;charset=utf-8",
        type: "PUT",
        headers: {
          Accept: "application/json"
        },
        success: function(data, textStatus) {
          //console.log(data);
          swal({
            title: "",
            text: "修改成功!",
            icon: "success",
            timer: 2000,
          }).then(function(value) {
	          $("#modal1 input[type=reset]").trigger("click");
	          $('#modal1').modal('close');
            window.location.reload();
          });
          //$('#modal2').modal();
        },
        error: function (data, textStatus, errorThrown) {
          console.log(data);
          swal({
            title: "修改失败!",
            text: "请联系管理员!",
            icon: "error",
            //timer: 2000,
          });
          M.updateTextFields();
        }
      });
    }

    function deleteSubmit(storeId) {
      swal({
        title: "确认删除该门店吗?",
        text: "一旦删除，将无法找回或查看该门店!",
        icon: "warning",
        buttons: {
          cancel: {
            text: "取消",
            value: null,
            visible: true,
            className: "waves-effect waves-light btn-flat",
            closeModal: true,
          },
          confirm: {
            text: "确认",
            className: "waves-effect waves-light"
          }
        },
        dangerMode: true,
      })
      .then(function(willDelete) {
        if (willDelete) {
          //console.log(willDelete);
          $.ajax({
            url: "/kangchenjunga/api/v1/companies/stores/" + storeId,
            contentType: "application/json;charset=utf-8",
            type: "DELETE",
            headers: {
              Accept: "application/json"
            },
            success: function(data, textStatus) {
              //console.log(data);
              swal("删除成功!", {
                icon: "success",
                timer: 2000,
              }).then(function(value) {
                window.location.reload();
              });
            },
            error: function(data, textStatus) {
            	//console.log(data.status);
            	//console.log(textStatus);
            	if(data.status == 400) {
            		swal({
                  title: "删除失败!",
                  text: "该企业已创建权益无法删除!",
                  icon: "error",
                  //timer: 2000,
                });
            	} else {
          		  swal("删除失败!", {
                  //timer: 2000,
                });
              }
            }
          });
        } else {
          //swal("删除失败!", {
            //timer: 2000,
          //});
        }
      });
    }

  </script>

  </body>
</html>
